<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/matchPage.css" />
		<title>玩家配比</title>
	</head>

	<body>
		<!--页头-->
		<header class="header">
			<button id="back" class="btn left"><img alt="返回" src="img/icon-back.png" /></button>
			<span class="title">参数设置</span>
			<button id="help" class="btn jump right"><img alt="帮助" src="img/circled-help.png" /></button>
		</header>
		<!--主体内容外包裹-->
		<div class="mainWrap">
			<!--玩家匹配模块-->
			<div class="playersMatch">
				<!--标题-->
				<div class="matchTitle">
					<!--加一层标签，用CSS设置对应宽度，使其竖向显示-->
					<span>玩家配比</span>
				</div>
				<!--设置区域-->
				<div class="setArea">
					<!--匹配结果-->
					<div id="matchResult" class="matchResult" >
						<!--<ul>
							<li><i class="square"></i>杀&emsp;手1人</li>
							<li><i class="square"></i>医&emsp;生1人</li>
							<li><i class="square"></i>狙击手1人</li>
							<li><i class="square"></i>警&emsp;察1人</li>
						</ul>-->
					</div>
						<!--设置按钮-->
						<button id="match" class="btn-set">点击设置<img src="img/pencil.png"/></button>

				</div>
			</div>
			<!--玩家词组模块-->
			<div class="wordGroup">
				<input class="playerWrods" type="text" placeholder="平民词组" />
				<input class="playerWrods" type="text" placeholder="杀手词组" />
			</div>
			<!--玩家人数模块-->
			<div class="playersNumber">
				<!--总人数输入框-->
				<div class="sum">玩家人数<input id="sum" class="sumNumber" type="text" value="4"/>人</div> 
				<!--提示信息-->
				<p id="tip" class="tip">
					支持4-18人同时游戏！
				</p>
				<!--控制滑块-->
				<div class="sumSet">
					<!--增加按钮-->
					<button id="reduce" class="btn">-</button>
					<!--滑块-->
					<input id="range" type="range" min="4" max="18" step="1" value="4"/>
					<!--减少按钮-->
					<button id="increase" class="btn">+</button>
				</div>
			</div>

		</div>
			<footer class="footer"><button id="deal" class="btn" value="">去发牌</button></footer>
		
	</body>
	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/matchPage.jquery.js" type="text/javascript" charset="utf-8"></script>

</html>